<template>
    <div class="popularize">
        <h5>
            <span>新人推广</span>
            <span class="add my-background" @click="goCreate(0,0)">创建新人推广活动</span>
        </h5>
        <div class="popularize-top">
            <span class="title">活动时间</span>
            <el-date-picker  v-model="timeValue[0]"  type="date" placeholder="选择开始日期" value-format="timestamp"></el-date-picker>
            <el-button type="primary" @click="searchPopularize" style="margin-left:20px;">搜索</el-button>
            <el-button type="info" @click="emptyPopularize">清空</el-button>
        </div>
        <div class="table-box">
            <el-table  :data="activityData" max-height='500px'  style="width: 100%" fit >
                <el-table-column  prop="id" label="序号" width="49"></el-table-column>
                <el-table-column  prop="extName" label="活动名称"></el-table-column>
                <el-table-column  label="活动周期">
                    <template slot-scope="scope">
                        <span>{{format(scope.row.startTime)}}至{{format(scope.row.endTime)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="活动状态"  width="78">
                    <template slot-scope="scope">
                        <span v-if="scope.row.startTime*1000<Date.parse( new Date())&&scope.row.endTime*1000>Date.parse( new Date())">进行中</span>
                        <span v-if="scope.row.startTime*1000>Date.parse( new Date())">未开始</span>
                        <span v-if="scope.row.endTime*1000<Date.parse( new Date())">已结束</span>
                    </template>
                </el-table-column>
                <el-table-column  label="是否上架"  width="78">
                    <template slot-scope="scope">
                        <span>{{scope.row.state==1?'上架':'下架'}}</span>
                    </template>
                </el-table-column>
                <el-table-column  label="创建时间">
                    <template slot-scope="scope">
                        <span>{{format(scope.row.createTime)}}</span>
                    </template>
                </el-table-column>
                <el-table-column  label="操作" fixed='right'>
                    <template  slot-scope="scope">
                        <el-button  type="text" v-if="scope.row.endTime*1000<Date.parse( new Date())" size="small" disabled>编辑</el-button>
                        <el-button  type="text" v-else size="small" @click="goCreate(1,scope.row.id)">编辑</el-button>
                        <el-button  type="text" size="small" @click="goView(2,scope.row.id)">查看</el-button>
                        <el-button  type="text" size="small" @click="handleClick(scope.row)">{{scope.row.state==1?'下架':'上架'}}</el-button>
                        <el-button  type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination class="pag"  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"  :page-sizes="[5, 10, 15, 20]"  :page-size="pageSize"  layout="total, sizes, prev, pager, next, jumper"  :total=total></el-pagination>
    </div>
</template>

<script>
export default {
    data(){
        return{
            baseurl:'',
            masknum:false,
            timeValue:[],//筛选-时间段
            activityData: [],//协议数据
            row:'',//弹窗数据
            //分页
            total:0,
            currentPage: 1,//第几页
            pageSize:5,//每页几条
        }
    },
    mounted(){
        this.baseurl=this.$store.state.baseurl2
        this.getActivityData()
    },
    methods:{
        //删除活动
        deleteClick(row){
            this.$confirm('您确定要删除'+row.extName+'的活动吗？', '提醒', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.post(this.baseurl+'/public/extension/del/delById/'+row.id).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getActivityData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //下架
        handleClick(row){
            var state
            var stateData
            if(row.state==1){state=2;stateData='下架'}else{state=1;stateData='上架'}
            this.$confirm('您确定要'+stateData+row.extName+'的活动吗？', '提醒', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: stateData+'成功!'
                });
                var extensionEntity={
                    id: row.id,
                    state:state
                }
                this.axios({
                    url:this.baseurl+'/public/extension/update/extension',
                    method:'post',
                    data:extensionEntity,
                }).then(res=>{
                    this.getActivityData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //筛选
        searchPopularize(){
            this.currentPage=1
            this.pageSize=5
            this.getActivityData()
        },
        //清空
        emptyPopularize(){
            this.timeValue=[]
            this.currentPage=1
            this.pageSize=5
            this.getActivityData()
        },
        //获取活动列表
        getActivityData(){
            var extensionEntity={
                "page":this.currentPage.toString (),
                "limit":this.pageSize.toString (),
                "startTime":this.timeValue[0]/1000
            }
            this.axios({
                url:this.baseurl+'/public/extension/extension/getPagelist',
                method:'post',
                data:extensionEntity,
            }).then(res=>{
                this.activityData=res.data.data.records
                this.total=res.data.data.total
            })
        },
        //创建、编辑新人推广活动
        goCreate(type,id){
            this.$router.push({path:'/index/marketingPopularizeEdit',query:{type:type,id:id}})
        },
        //查看表格数据
        goView(type,id){
            this.$router.push({path:'/index/marketingPopularizeView',query:{type:type,id:id}})
        },
        goDetails(row){
            this.$router.push({path:'/index/marketingPopularizeView',query:{id:row.id}})
        },
        //分页
        handleSizeChange(val) {
            this.pageSize=val
            this.getActivityData()
        },
        handleCurrentChange(val) {
            this.currentPage=val
            this.getActivityData()
        },
        //处理时间戳
        format(shijianchuo) {
            var time = new Date(shijianchuo*1000);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var f = time.getMinutes();
            var s = time.getSeconds();
            //想要什么格式可以自己改
            // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f);
        },
        //小于10的时候，前边加0（08：08：12）
        add0(m) {
            return m < 10 ? '0' + m : m
        },
    },
    watch:{
        
    }
}
</script>

<style scoped>
.popularize{
    min-height: calc(100vh - 100px);
    position: relative;
}
.popularize>h5{
    display: flex;
    justify-content: space-between;
}
.popularize>h5 .add{
    display: inline-block;
    font-size: 15px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    padding: 10px 12px;
}
.table-box{
    margin-top: 60px;
}
.popularize-top{
    margin-top: 50px;
}
.title{
    display: inline-block;
    text-align: right;
    width: 90px;
    margin-right: 15px;
}
.btn{
    height: 38px;
    line-height: 36px;
    margin-left: 30px;
    font-size: 15px;
}
.button{
    background: #0084ff;
    color: #fff;
    margin-left:40px;
    border:0;
    padding:0 25px;
    height: 37px;
    line-height: 37px;
}
.popularize-top input{
    width: 210px;
    padding-left: 15px;
}
.popularize-top input::-webkit-input-placeholder {
    color: #c5c9cf;
    font-size: 14px;
}
.pag{
    margin-top: 50px;
}
</style>

<style scoped>
/* 遮罩层 */
.mask{
    width: 100vw;
    height: 100vh;
    /* color: #555; */
    background: rgba(51, 51, 51, 0.692);
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
}
.mask .content{
    width: 620px;
    height: 400px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30PX;
}
.mask .content-top{
    display: flex;
    justify-content: space-between;
}
.mask .content-top img{
    width: 35px;
}
.content-items{
    margin: 30px;
}
.content-items .item{
    margin:20px 10px;
}
.content-items .item span:first-child{
    display: inline-block;
    width: 100px;
}
</style>
<style>
.el-date-editor .el-range-separator{
    padding: 0;
}
</style>